<template>
	<view class="user-QA">
		<block v-if="show">
			<view class="user-QA-tabs">
				<u-tabs
					:is-scroll="false"
					:list="QAtabs"
					active-color="#141414"
					:current="QAindex"
					@change="change">
				</u-tabs>
			</view>
			<view class="user-QA-list" v-if="QAindex==0">
				<view class="user-QA-item" v-for="(data,index) in noAnswer" :key="index">
					<view class="user-QA-item-title">
						<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/QA/Q.png"></image>
						<text>{{data.content}}</text>
					</view>
					<view class="user-QA-item-pro" @click="goProInfo(data.goods_id)">
						<image :src="data.goods.image_thumb" mode="aspectFill"></image>
						<view class="user-QA-item-pro-info">
							<view class="user-QA-item-pro-tit">{{data.goods.goods_name}}</view>
							<view class="user-QA-item-pro-code">编码：{{data.goods.goods_sn}}</view>
						</view>
					</view>
					<view class="user-QA-item-userInfo">
						<text class="time"><text class="name">{{data.user.nickname}}</text> 提问于 {{data.add_time}}</text>
						<view class="btn" v-if="userInfo.is_admin!=0" @click="answer(data,index)">立即回答</view>
					</view>
				</view>
				<pt-nothing
					text="您还没有提问"
					:fixed="true" 
					v-if="noMore && !noAnswer.length" 
					top="80" 
					icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png?v=1">
				</pt-nothing>
			</view>
			<pt-nomore v-if="noMore && noAnswer.length && QAindex==0"></pt-nomore>
			<view class="user-QA-list" v-if="QAindex==1">
				<view class="user-QA-item" v-for="(data,index) in isAnswer" :key="index">
					<view class="user-QA-item-title">
						<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/QA/Q.png"></image>
						<text>{{data.content}}</text>
					</view>
					<view class="user-QA-item-answer">
						<image src="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/QA/A.png"></image>
						<view>
							<text v-for="(item,i) in data.answer" :key="i">{{item.content}}</text>
						</view>
					</view>
					<view class="user-QA-item-pro" @click="goProInfo(data.goods_id)">
						<image :src="data.goods.image_thumb" mode="aspectFill"></image>
						<view class="user-QA-item-pro-info">
							<view class="user-QA-item-pro-tit">{{data.goods.goods_name}}</view>
							<view class="user-QA-item-pro-code">编码：{{data.goods.goods_sn}}</view>
						</view>
					</view>
					<view class="user-QA-item-userInfo">
						<text class="time"><text class="name">{{data.user.nickname}}</text> 提问于 {{data.add_time}}</text>
						<view class="btn" v-if="userInfo.is_admin!=0" @click="answer(data,index)">立即回答</view>
					</view>
				</view>
				<pt-nothing
					text="您还没有提问"
					:fixed="true"
					v-if="noMore1 && !isAnswer.length" 
					top="80"
					icon="https://jiajudashi.oss-cn-shenzhen.aliyuncs.com/images/shop/icons/nothing.png?v=1">
				</pt-nothing>
			</view>
			<pt-nomore v-if="noMore1 && isAnswer.length && QAindex==1"></pt-nomore>
			<pt-loading-more v-if="isLoading"></pt-loading-more>
		</block>
		
		<pt-loading></pt-loading>
		
		<uni-popup type="bottom" ref="answerQuestion">
			<view class="answer-question">
				<view class="answer-question-tit">{{questionInfo.question_tit}}</view>
				<textarea 
					placeholder="温馨提醒：为了更好的安全服务，回复过程中禁止出现微信、手机号码，厂家请勿私加客户微信，谢谢！" 
					v-model="questionInfo.content">
				</textarea>
				<view :class="['complate',{isSubmit: isSubmit}]" @click="$u.throttle(submit, 2000)">
					<u-loading mode="flower" style="margin-right: 20rpx;" v-if="isSubmit"></u-loading>
					完成
				</view>
			</view>
		</uni-popup>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				userInfo: '',
				QAindex: 0,
				QAtabs: [{
					name: '未回答(0)'
				},{
					name: '已回答(0)'
				}],
				noAnswer: [],
				isAnswer: [],
				page: 0,
				page1: 0,
				noMore: false,
				noMore1: false,
				isSubmit: false,
				questionInfo: {
					goods_id: '',
					index: '',
					type: '',
					question_tit: '',
					ask_id: '',
					content: ''
				},
				Refresh: false
			};
		},
		onPullDownRefresh() {
			this.Refresh = true
			setTimeout(() => {
				this.show = false
				this.noAnswer = []
				this.isAnswer = []
				this.page = 0
				this.page1 = 0
				this.noMore = false
				this.noMore1 = false
				this.init()
			},500)
		},
		onLoad() {
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'))
			this.init()
		},
		onReachBottom() {
			if(this.QAindex==0){
				if(!this.noMore){
					this.page++
					this.isLoading = true
					this.getNoAnswer()
				}
			}else{
				if(!this.noMore1){
					this.page1++
					this.isLoading = true
					this.getAnswer()
				}
			}
		},
		methods: {
			change(e){
				this.QAindex = e
				this.noAnswer = []
				this.isAnswer = []
				this.page = 0
				this.page1 = 0
				this.noMore = false
				this.noMore1 = false
				this.init()
			},
			getNoAnswer(){
				let data = {
					page: this.page,
					get_goods: 1,
					is_answer: 0
				}
				if(this.userInfo.role_type==1){
					data.user_id = this.userInfo.user_id
				}else if(this.userInfo.role_type==2 || this.userInfo.role_type==3 || this.userInfo.role_type==4 || this.userInfo.role_type==11){
					data.store_id = this.userInfo.store_id
				}else if(this.userInfo.role_type==8 || this.userInfo.role_type==10 || this.userInfo.role_type==12){
					data.factory_sn = this.userInfo.factory_sn
				}
				this.$u.api.AskLists(data).then(res => {
					this.show = true
					this.isLoading = false
					if(res.counts){
						this.QAtabs[0].name = '未回答('+res.counts+')'
					}
					if(res.datas.length){
						res.datas.forEach(item => {
							this.noAnswer.push(item)
						})
					}else{
						this.noMore = true
					}
					if(this.Refresh){
						this.Refresh = false
						uni.stopPullDownRefresh({
							success: () => {
								uni.showToast({
									icon: 'none',
									title: '刷新成功'
								})
							}
						})
					}
				})
			},
			getAnswer(){
				let data = {
					page: this.page1,
					get_goods: 1,
					is_answer: 1
				}
				if(this.userInfo.role_type==1){
					data.user_id = this.userInfo.user_id
				}else if(this.userInfo.role_type==2 || this.userInfo.role_type==3 || this.userInfo.role_type==4 || this.userInfo.role_type==11){
					data.store_id = this.userInfo.store_id
				}else if(this.userInfo.role_type==8 || this.userInfo.role_type==10 || this.userInfo.role_type==12){
					data.factory_sn = this.userInfo.factory_sn
				}
				this.$u.api.AskLists(data).then(res => {
					this.isLoading = false
					if(res.counts){
						this.QAtabs[1].name = '已回答('+res.counts+')'
					}
					if(res.datas.length){
						res.datas.forEach(item => {
							this.isAnswer.push(item)
						})
					}else{
						this.noMore1 = true
					}
				})
			},
			init(){
				this.getNoAnswer()
				this.getAnswer()
			},
			goProInfo(goods_id){
				getApp().goProInfo(goods_id)
			},
			answer(data,index){
				this.questionInfo.goods_id = data.goods_id
				this.questionInfo.content = ''
				this.questionInfo.index = index
				this.questionInfo.question_tit = data.content
				this.questionInfo.ask_id = data.ask_id
				this.$refs.answerQuestion.open()
			},
			submit(){
				if(!this.questionInfo.content){
					uni.showToast({
						icon: 'none',
						title: '请输入回答内容'
					})
					return
				}
				if(this.isSubmit){
					uni.showToast({
						icon: 'none',
						title: '请勿重复提交'
					})
					return
				}
				this.isSubmit = true
				this.$u.api.AddAnswer({
					type: this.questionInfo.type,
					ask_id: this.questionInfo.ask_id,
					content: this.questionInfo.content,
					goods_id: this.questionInfo.goods_id,
				}).then(res => {
					this.isSubmit = false
					uni.showToast({
						icon: 'none',
						title: '回答成功'
					})
					this.noAnswer = []
					this.isAnswer = []
					this.page = 0
					this.page1 = 0
					this.noMore = false
					this.noMore1 = false
					this.init()
					this.$refs.answerQuestion.close()
				}).catch(() => {
					this.isSubmit = false
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #f7f7f7;
	}
	.user-QA-tabs{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		z-index: 10;
	}
	.user-QA-list{
		padding: 110rpx 30rpx 0;
		.user-QA-item{
			background-color: #FFF;
			padding: 30rpx;
			border-radius: 8rpx;
			margin-bottom: 40rpx;
			&:last-child{
				margin-bottom: 0;
			}
			.user-QA-item-title{
				display: flex;
				align-items: flex-start;
				image{
					width: 32rpx;
					height: 32rpx;
					margin: 6rpx 10rpx 0 0;
				}
				text{
					font-size: 32rpx;
					font-weight: bold;
					flex: 1;
					min-width: 0;
				}
			}
			.user-QA-item-answer{
				display: flex;
				margin-top: 20rpx;
				image{
					width: 32rpx;
					height: 32rpx;
					margin: 6rpx 10rpx 0 0;
				}
				text{
					display: block;
					margin-bottom: 10rpx;
					color: #444;
					font-size: 28rpx;
					&:last-child{
						margin-bottom: 0;
					}
				}
			}
			.user-QA-item-pro{
				display: flex;
				align-items: center;
				margin-top: 30rpx;
				image{
					width: 136rpx;
					height: 136rpx;
				}
				.user-QA-item-pro-info{
					margin-left: 20rpx;
					flex: 1;
					min-width: 0;
					.user-QA-item-pro-tit{
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						font-size: 28rpx;
						color: #444;
					}
					.user-QA-item-pro-code{
						margin-top: 40rpx;
						color: #A4A4A4;
						font-size: 22rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}
			}
			.user-QA-item-userInfo{
				border-top: solid 2rpx #EEE;
				padding-top: 40rpx;
				margin-top: 40rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.time{
					color: #909090;
					font-size: 22rpx;
					display: flex;
					align-items: center;
					.name{
						display: inline-block;
						max-width: 4em;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
						vertical-align: middle;
						margin: -4rpx 5rpx 0 0;
					}
				}
				.btn{
					color: #FFF;
					background-color: #141414;
					border-radius: 8rpx;
					height: 52rpx;
					line-height: 52rpx;
					padding: 0 10rpx;
					font-size: 24rpx;
				}
			}
		}
	}
	.answer-question{
		background-color: #FFF;
		padding: 30rpx;
		border-radius: 10rpx 10rpx 0 0;
		.answer-question-tit{
			font-weight: bold;
			font-size: 30rpx;
		}
		textarea{
			width: 100%;
			margin: 20rpx 0;
			height: 200rpx;
			font-size: 28rpx;
		}
		.complate{
			height: 80rpx;
			line-height: 80rpx;
			background-color: #141414;
			color: #FFF;
			border-radius: 8rpx;
			text-align: center;
			font-size: 30rpx;
			&.isSubmit{
				opacity: .5;
			}
		}
	}
</style>